<template>
  <div>
<h2>{{ count }}</h2>
<button @click="change">change</button>
  </div>
</template>

<script>
import {ref ,onMounted,onBeforeMount, onBeforeUpdate, onUpdated} from 'vue'
// export default
// {
//   //option API
//   data(){
//     return{
//       msg:'hello'
//     },
//     beforeCreate() {
//       // 在vue源码创造前，还没初始化Options API
      
//     },
//     created(){

//     },
//     beforemounted(){
//       // 在vue源码工场编译之后，具备html结构
//     },
//     mounted(){

//     },
//     onBeforeUpdate(){

//     },
//     updted(){

//     }
    
//   }
// }

export default{
  setup(){
    const count =ref(0)
    // const age=ref(18)
    const change=()=>{
      count.value++
    }

    onBeforeMount(()=>{  //注册一个钩子，在组件被挂载之前被调用
      console.log('onBeforeMount');
    })

    onMounted(()=>{ //vue模板被编译成html，又被挂载到页面上之后
      console.log('App onMounmted');
    })

    onBeforeUpdate(()=>{ //数据源用到了，并且数据源改变了才会执行
      console.log('onBeforeUpdate');
    })

    onUpdated(()=>{
      console.log('onUpdated');
    })

    const foo=()=>{
      console.log('foo 执行了');
    }
    foo()
    return{
      count,
      change
    }
  }
}
</script>

<style lang="scss" scoped>

</style>